<template>
	<div class='recommend'>
		<Card></Card>
		<ul>
			<swiper class="swiper" :options="swiperOption">
	         <swiper-slide class="slide-1" v-for='(item,index) in recommendList'
				:key='index'
				@click='goDetail(item.id)'>
				<li>
				<h2>
					<img :src="item.imgUrl" alt="" @click='goDetail(item.id)'>
				</h2>
				<div>
					<h3>{{item.name}}</h3>
					<p>{{item.content}}</p>
					<div class='price'>
						<span>¥</span>
						<b>{{item.price}}</b>
					</div>
				</div>
			</li>
			 </swiper-slide>
	        </swiper>
			
		</ul>
	</div>
</template>

<script>
import Card from '@/components/home/Card.vue'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
	name: 'swiper-example-3d-flip',
	  title: '3D Flip effect',
	props:{
		recommendList:Array
	},
	
	methods:{
		goDetail( id ){
			this.$router.push({
				path:'/detail',
				query:{
					id
				}
			})
		}
	},
	components:{
		Card,
		swiper,
		swiperSlide
	},
	data() {
		return {
		  swiperOption: {
			effect: 'flip',
			grabCursor: true,
			pagination: {
			  el: '.swiper-pagination'
			},
			navigation: {
			  nextEl: '.swiper-button-next',
			  prevEl: '.swiper-button-prev'
			}
		  }
		}
	  }
}
</script>

<style lang="scss" scoped>
.recommend ul li{
	position: relative;
}
.recommend ul li h2{
	text-align: center;
}
.recommend ul li img{
	width: 9.6rem;
	height: 3.84rem;
	border-radius: 12px;
}
.recommend ul li > div{
	position: absolute;
	right:0;
	top:0;
}
.recommend ul li > div{
	position: absolute;
	right:0;
	top:0;
	display: flex;
	flex-direction: column;
	padding:0.533333rem;
}
.recommend ul li > div h3{
	font-size:12px;
}
.recommend ul li > div p{
	font-size:0.426666rem;
}
.price{
	margin-top: 0.666666rem;
	text-align: right;
	color:rgb(39, 49, 61)
}
.price span{
	font-size:0.373333rem;
}
.swiper {
//   height: 300px;
  width: 100%;

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    // font-size: $font-size-huge * 2;
    background-color: white;
  }
}
  
	.swiper {
	  width: 300px;
	  padding: 0px;
	  background-color:white;
  
	//   .swiper-slide {
	// 	background-position: 50%;
	// 	background-size: cover;
	// 	width: 100%;
  
	// 	&.slide-1 {
	// 	  background-image:url('../../assets/images/jd2.1.jpg');
	// 	}
	// 	&.slide-2 {
	// 	  background-image:url('../../assets/images/jd3.1.jpg');
	// 	}
	// 	&.slide-3 {
	// 	  background-image:url('../../assets/images/jd4.1.jpg');
	// 	}
	// 	&.slide-4 {
	// 	  background-image:url('../../assets/images/jd5.1.jpg');
	// 	}
	// 	&.slide-5 {
	// 	  background-image:url('/images/example/9.jpg');
	// 	}
	//   }
	}
</style>
